<template>
  <div class="lover-container">

    <button type="button" @click="startRecordAudio">开始录音</button>
    <h3>录音时长：{{ recorder.duration.toFixed(4) }}</h3>
    <br/>
    <button type="button" @click="stopRecordAudio">停止录音</button>
    <button type="button" @click="playRecordAudio">播放录音</button>
    <button type="button" @click="getWAVRecordAudioData">获取WAV录音数据</button>
    <button type="button" @click="downloadWAVRecordAudioData">下载WAV录音文件</button>
    <button type="button" @click="uploadWAVData">上传WAV录音数据</button>
    <br/>
    <audio ref="audio" src="http://127.0.0.1:9090/audio/1682848218696-1682848218680.wav" preload></audio>
    <button @click="playAudio">play</button>
  </div>
</template>

<script>
import Recorder from 'js-audio-recorder'
import { getChatsAudioAPI } from '@/api'

export default {
  name: 'loverIndex',

  data () {
    return {
      recorder: new Recorder({
        sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
        sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
        numChannels: 1 // 声道，支持 1 或 2， 默认是1
        // compiling: false,(0.x版本中生效,1.x增加中)  // 是否边录边转换，默认是false
      })
    }
  },
  /* socket是监听服务器发布的自定义事件 */
  // sockets: {
  //   /* 监听couple事件 */
  //   }
  // },
  methods: {
    // 开始录音
    startRecordAudio () {
      Recorder.getPermission().then(
        () => {
          console.log('开始录音')
          this.recorder.start() // 开始录音
        },
        (error) => {
          this.$message({
            message: '请先允许该网页使用麦克风',
            type: 'info'
          })
          console.log(`${error.name} : ${error.message}`)
        }
      )
    },
    // 停止录音
    stopRecordAudio () {
      console.log('停止录音')
      this.recorder.stop()
    },
    // 播放录音
    playRecordAudio () {
      console.log('播放录音')
      this.recorder.play()
    },
    // 获取WAV录音数据
    getWAVRecordAudioData () {
      const wavBlob = this.recorder.getWAVBlob()
      console.log(wavBlob)
    },
    // 下载WAV录音文件
    downloadWAVRecordAudioData () {
      this.recorder.downloadWAV('badao')
    },
    // 上传wav录音数据
    async uploadWAVData () {
      const wavBlob = this.recorder.getWAVBlob()
      // 创建一个formData对象
      const formData = new FormData()
      // 此处获取到blob对象后需要设置fileName满足当前项目上传需求，其它项目可直接传把blob作为file塞入formData
      const newbolb = new Blob([wavBlob], { type: 'audio/wav' })
      // 获取当时时间戳作为文件名
      const fileOfBlob = new File([newbolb], new Date().getTime() + '.wav')
      formData.append('file', fileOfBlob)
      const res = await getChatsAudioAPI(formData)
      console.log(res)
    },
    playAudio () {
      this.$refs.audio.play()
    }
  }
}
</script>

<style scoped lang="less">
.lover-container {
  height: 100vh;
  background-color: #f6f6f6;
  overflow: hidden;

  .van-nav-bar {
    height: 55px;
    border-radius: 0 0 20px 20px;

    &::after {
      border: none;
    }
  }

  .mainWrap {
    //background-color: pink;
    height: 82vh;
    position: absolute;
    width: 100%;
    margin-top: 58px;
    overflow-y: auto;

    .main {
      padding-bottom: 30px;

      .msg {
        font-size: 13px;
        display: flex;
        padding: 25px 20px 0 20px;
        flex-wrap: wrap;

        .conWrap {

          .content {
            color: black;
            max-width: 200px;
            margin-left: 10px;
            padding: 7px;
            border-radius: 0 10px 10px 10px;
            background-color: #fff;
            letter-spacing: .5px;
            font-family: "微软雅黑", sans-serif;
            word-break: break-all;
          }

          .msgTime {
            font-size: 12px;
            padding: 5px 0px 0px 15px;
          }
        }
      }

      .rightPerson {
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: wrap;

        .conWrap {
          .content {
            color: #fff;
            max-width: 200px;
            margin-right: 10px;
            border-radius: 10px 0px 10px 10px;
            background-color: #eb6282;
            word-break: break-all;
          }

          .msgTime {
            float: right;
            padding: 5px 15px 0px 0px;
          }
        }
      }
    }
  }

  .foot {
    background-color: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    border-radius: 20px 20px 0px 0px;

    .inputBox {
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;

      input {
        font-size: 14px;
        height: 30px;
        padding: 0px 10px;
        width: 200px;
        border: none;
      }
    }

    .moreFun {
      padding: 15px;
      transition: all 2s;
      font-size: 12px;
    }
  }
}
</style>
